<template>
  <view :class="wrapperClass" @tap="$emit('tap', $event)">
    <image :class="avatarClass" :src="computedAvatar" mode="scaleToFill" />
    <image v-if="title === '匠人'" class="avatar-gj" src="/static/personal-gj1.png" mode="scaleToFill" />
    <image v-if="title === '匠师'" class="avatar-gj" src="/static/personal-gj2.png" mode="scaleToFill" />
  </view>
</template>

<script>
export default {
  name: 'UserAvatar',
  props: {
    avatarImage: { type: String, default: '' },
    title: { type: String, default: '' },
    // size can be 'large' (default), 'medium', or 'small'
    size: { type: String, default: 'large' }
  },
  computed: {
    computedAvatar() {
      return this.avatarImage || '/static/default-avatar.jpg';
    },
    wrapperClass() {
      return `user-avatar-wrapper ${this.size || 'large'}`;
    },
    avatarClass() {
      return `avatar ${this.size || 'large'}`;
    }
  }
};
</script>

<style scoped>
.user-avatar-wrapper {
  position: relative;
  box-sizing: border-box;
}
.user-avatar-wrapper.large {
  width: 172rpx;
  height: 172rpx;
  margin-right: 8rpx;
  padding: 32rpx 20rpx 8rpx;
}
.user-avatar-wrapper.medium {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 104rpx;
  height: 104rpx;
  padding: 0;
}
.user-avatar-wrapper.small {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 84rpx;
  height: 84rpx;
  padding: 0;
  margin-right: 16rpx;
}
.user-avatar-wrapper.small .avatar-gj {
  top: -0rpx;
  left: -0rpx;
}
.user-avatar-wrapper.medium .avatar-gj {
  top: -10rpx;
}
.avatar {
  border-radius: 15rpx;
}
.avatar.large {
  width: 132rpx;
  height: 132rpx;
}
.avatar.medium {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
}
.avatar.small {
  width: 64rpx;
  height: 64rpx;
  border-radius: 16rpx;
}
.avatar-gj {
  position: absolute;
  top: 0rpx;
  left: 0rpx;
  width: 100%;
  height: 100%;
  z-index: 9;
}
</style> 